<template>
  <div class="chart-content">
    <div class="item">
      <p>{{buName}}-招采文件报送率</p>
        <i-circle
          v-show="isLeftChart"
            :size="160"
            :trail-width="9"
            :stroke-width="9"
            :percent="toPercentWithoutUnit(chatLeftData.bidFileRepRate)"
            stroke-linecap="square"
            stroke-color="#facd91">
            <div class="demo-circle-custom">
                <h1>{{chatLeftData.bidFileRatePercent}}</h1>
                <div v-if="removeMinusSign(chatLeftData.bfrrChain) !== ''">
                  <span class="chain">环比</span>
                  <img src="@/asset/images/rise.svg" alt="" v-if="chatLeftData.bfrrChain > 0">
                  <img src="@/asset/images/fall.svg" alt="" v-else-if="chatLeftData.bfrrChain < 0" class="fall">
                  <span>{{removeMinusSign(chatLeftData.bfrrChain)}}</span>
                </div>
            </div>
        </i-circle>
        <!-- <div v-show="isLeftChart" ref="chartLeftRef" style="width: 50%; height: 250px"></div> -->
        <div v-show="!isLeftChart" class="no-data">暂无数据</div>
     </div>
    
     <div class="item">
      <p>{{buName}}-分项报价表报送率</p>
      <!-- <div v-show="isRightChart" ref="chartRightRef" style="width: 50%; height: 250px"></div> -->
      <i-circle
         v-show="isRightChart"
        :size="160"
        :trail-width="9"
        :stroke-width="9"
        :percent="toPercentWithoutUnit(chatRightData.quotationFileRepRate)"
        stroke-linecap="square"
        stroke-color="#f4a43b">
        <div class="demo-circle-custom">
            <h1>{{chatRightData.quotationFileRatePercent}}</h1>
            <div v-if="removeMinusSign(chatLeftData.qfrrChain) !== ''">
              <span class="chain">环比</span>              
              <img src="@/asset/images/rise.svg" alt="" v-if="chatLeftData.qfrrChain > 0">
              <img src="@/asset/images/fall.svg" alt="" v-else-if="chatLeftData.qfrrChain < 0" class="fall">
              <span>{{removeMinusSign(chatLeftData.qfrrChain)}}</span>
            </div>
        </div>
        </i-circle>
      <div v-show="!isRightChart" class="no-data">暂无数据</div>
    </div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import {getPieOption } from '../js/echartOption'

export default {
  props:{
    reportData: {
      type: Object,
      default: () => {},
    },
    buName:{
      type: String,
      default: "华润集团",
    }
  },
  data () {
    return {
      chartLeftIns:null,
      chartRightIns:null,
      chartLeftRef:"",
      chartRightRef:"",
      chatLeftData:{},
      chatRightData:{},
      isLeftChart: false,
      isRightChart: false,
    }
  },
  

  methods: {
    initLeftChart(){
      const chatData = [
        {
          name:"招采文件报送率",
          value:this.chatLeftData?.bidFileRepRate
        }
      ]
      const title = this.buName + "-招采文件报送率"
      this.chartLeftIns = null;
      this.chartLeftIns = echarts.init(this.$refs.chartLeftRef, 'default');
      const option = getPieOption(chatData,title);
      option && this.chartLeftIns.setOption(option,true);
      window.addEventListener('resize',() =>{
        this.chartLeftIns && this.chartLeftIns.resize();
      })
    
    },

    initRightChart(){
      const chatData = [
        {
          name:"分项报价表报送率",
          value:this.chatRightData?.quotationFileRepRate
        },
      ]
      const title = this.buName + "-分项报价表报送率"
      this.chartRightIns = null;
      this.chartRightIns = echarts.init(this.$refs.chartRightRef, 'default');
      const option = getPieOption(chatData,title);
      option && this.chartRightIns.setOption(option,true);
      window.addEventListener('resize',() =>{
        this.chartRightIns && this.chartRightIns.resize();
      })
    }
  },

  watch:{
    reportData:{
      handler(newVal) {
        if(newVal?.bidFileRepRate){
          this.chatLeftData = newVal;
          this.$set(this.chatLeftData,"bidFileRatePercent",this.toFixPercent(newVal?.bidFileRepRate))
          // this.$nextTick(() => {
          //   this.initLeftChart()
          // })
          this.isLeftChart = true;
        }
        else{
          this.chatLeftData = {};
          this.isLeftChart = false;
        }

        if(newVal?.quotationFileRepRate){
          this.chatRightData = newVal;
          this.$set(this.chatRightData,"quotationFileRatePercent",this.toFixPercent(newVal?.quotationFileRepRate))
          // this.$nextTick(() => {
          //   this.initRightChart()
          // })
          this.isRightChart = true;
        }
        else{
          this.chatRightData = {};
          this.isRightChart = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
  
  beforeDestroy(){
    if(this.chartLeftIns){
      this.chartLeftIns.dispose();
    }
    if(this.chartRightIns){
      this.chartRightIns.dispose();
    }
  }
}
</script>

<style lang="less" scoped>
.chart-content {
  padding: 0 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p{
      color:"#333";
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 16px;
    }
  }
  .no-data{
    width: 100%;
    height: 100%;
    line-height: 150px;
    text-align: center;
    color: #333;
    font-size: 14px;
  }
  .demo-circle-custom{
    h1{
      font-size: 25px;
      color: #333;
      font-weight: bold;
    }
    div{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      span{
        font-size: 12px;
        color: #000000a5;
      }
      img{
        width: 10px;
        height: 10px;
        margin: 0 5px;
      }
	  .fall{
	  	transform: rotate(180deg);
	  }
      .chain{
        margin-right: 5px;
      }
    }
  }
}
</style>
